<template>
	<view>
		<view class="mainpadding ffffff xiahuaxian">
			<input type="text" :placeholder="$t('dizhi.xm')" v-model="name">
		</view>
		<view class="mainpadding ffffff xiahuaxian">
			<input type="number" :placeholder="$t('dizhi.sjhm')" v-model="mobile">
		</view>
		<view class="mainpadding ffffff xiahuaxian">
			<input type="number" :placeholder="$t('dizhi.sfzh')" v-model="idNo">
		</view>
		<view class="mainpadding ffffff xiahuaxian" @click="show=true">
			<input type="text" :placeholder="$t('dizhi.sfcs')" disabled="" v-model="ssq">
		</view>
		<view class="mainpadding ffffff xiahuaxian">
			<input type="text" :placeholder="$t('dizhi.xxsz')" v-model="address">
		</view>
		<view class="flexcenter ffffff mainpadding" @click="flag=!flag">
			<u-icon name="checkmark-circle-fill" class="margin_right1" v-if="flag" color="#e95951" size="20"></u-icon>
			<u-icon name="checkmark-circle-fill" class="margin_right1" v-if="!flag" color="#999" size="20"></u-icon>
			<view class="xiaohei main_size">{{$t('dizhi.swmrdz')}}</view>
		</view>
		<view class="mainpadding gudingdb">
			<view class="bighbtn" @click="submit">{{$t('dizhi.bc')}}</view>
		</view>
		<u-popup :show="show" @close="show=false" :closeOnClickOverlay="false">
			<view class="mainpadding_top">
				<view class="flexbetween">
					<view class="flexleft">
						<view class=" main_size margin_right3" :class="current==0?'xiaohong':'xiaohui'"
							@click="current=0">{{$t('dizhi.sf')}}</view>
						<view class=" main_size margin_right3" v-if="provinceId" :class="current==1?'xiaohong':'xiaohui'"
							@click="current=1">{{$t('dizhi.cs')}}</view>
						<view class=" main_size"  v-if="cityId" :class="current==2?'xiaohong':'xiaohui'" @click="current=2">{{$t('dizhi.qx')}}</view>
					</view>
					<view class="xiaohei titletext" @click="surecs">{{$t('dizhi.qd')}}</view>
				</view>
			</view>
			<scroll-view scroll-y="true" style="height: 500rpx;" v-if="current==0">
				<view class="mainpadding  main_size" :class="provinceId==item.id?'xiaohong':'xiaohui'"
					v-for="item in cs1" :key="item.id" @click="checkitem(item,0)">{{item.name}}</view>
			</scroll-view>
			<scroll-view scroll-y="true" style="height: 500rpx;" v-if="current==1">
				<view class="mainpadding  main_size" :class="cityId==item.id?'xiaohong':'xiaohui'"
					v-for="item in cs2" :key="item.id" @click="checkitem(item,1)">{{item.name}}</view>
			</scroll-view>
			<scroll-view scroll-y="true" style="height: 500rpx;" v-if="current==2">
				<view class="mainpadding  main_size" :class="areaId==item.id?'xiaohong':'xiaohui'"
					v-for="item in cs3" :key="item.id" @click="checkitem(item,2)">{{item.name}}</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				// 城市开始
				show: false,
				ssq: "",
				provinceId: "",
				cityId: "",
				areaId: "",
				cs1: [],
				cs2: [],
				cs3: [],
				csarr: [],
				current: 0,
				// 城市结束
				flag: false,
				name:"",
				mobile:"",
				idNo:"",
				address:"",
				listid:"",
			}
		},
		onLoad(options) {
			if(options.id){
				this.listid = options.id
				this.getDetail()
			}
			this.getcs1()
		},
		methods: {
			getDetail(){
				httpRequest.request("/wx/address/detail", 'GET', {
					id:this.listid
				}).then(res => {
					let data = res.data
					this.address = data.address
					this.csarr.push(data.provinceName,data.cityName,data.areaName)
					this.ssq = this.csarr.join()
					this.provinceId = data.provinceId
					this.cityId = data.cityId
					this.areaId = data.areaId
					this.flag = data.isDefault
					this.idNo = data.idNo
					this.mobile = data.mobile
					this.name = data.name
				})
			},
			submit(){
				if(this.name==""){
					httpRequest.toast(this.$t('dizhi.qsrxm'))
					return false
				}
				if(this.mobile==""){
					httpRequest.toast(this.$t('dizhi.qsrshj'))
					return false
				}
				if(this.idNo==""){
					httpRequest.toast(this.$t('dizhi.qsrsfzh'))
					return false
				}
				if(this.cityId==""){
					httpRequest.toast(this.$t('dizhi.qxzssq'))
					return false
				}
				if(this.address==""){
					httpRequest.toast(this.$t('dizhi.qsrxxdz'))
					return false
				}
				let url = "/wx/address/save"
				let data = {
					address:this.address,
					areaId:this.areaId,
					cityId:this.cityId,
					id:this.listid,
					mobile:this.mobile,
					name:this.name,
					provinceId:this.provinceId,
					idNo:this.idNo,
					isDefault:this.flag?1:0,
				}
				if(this.listid){
					url = "/wx/address/save"
				}
				httpRequest.request(url, 'POST', data).then(res => {
					httpRequest.toast(res.errmsg)
					if(res.errno==0){
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
				})
			},
			// 城市开始
			surecs(){
				this.ssq = this.csarr.join()
				this.show=false
			},
			getcs1() {
				httpRequest.request('/wx/region/list', 'GET', {
					pid: 0
				}).then(res => {
					this.cs1 = res.data
				})
			},
			getcs2() {
				httpRequest.request('/wx/region/list', 'GET', {
					pid: this.provinceId
				}).then(res => {
					this.cs2 = res.data
				})
			},
			getcs3() {
				httpRequest.request('/wx/region/list', 'GET', {
					pid: this.cityId
				}).then(res => {
					this.cs3 = res.data
				})
			},
			checkitem(item, value) {
				this.csarr[value] = item.name
				if (value == 0) {
					if(item.id!=this.provinceId){
						this.cityId = ""
						this.areaId = ""
						this.cs2 = []
						this.cs3 = []
					}
					this.provinceId = item.id;
					this.getcs2();
					this.current = 1
					return false
				}
				if (value == 1) {
					if(item.id!=this.cityId){
						this.areaId = ""
						this.cs3 = []
					}
					this.cityId = item.id;
					this.getcs3();
					this.current = 2
					return false
				}
				if (value == 2) {
					this.areaId = item.id
				}
			}
			// 城市结束
		}
	}
</script>

<style>

</style>